<template>
<block>
<view class="cu-bar search bg-white">
  <view class="search-form round">
    <text class="cuIcon-search"></text>
    <input type="text" placeholder="请输入商品名" confirm-type="search" @confirm="searchHandle" focus/>
  </view>
</view>
<view v-if="searchHistory.length > 0">
  <view class="cu-bar bg-white">
    <view class="action"><text class="cuIcon-time"></text>历史搜索</view>
    <view class="action">
      <text class="cuIcon-delete lg text-gray" @tap="clearSearchHistory"></text>
    </view>
  </view>
  <view class="padding-sm flex flex-wrap bg-white">
    <view class="padding-xs" v-for="(item,index) in (searchHistory)" :key="index">
      


<view class="cu-tag round" @tap="searchHandle" :data-name="item.name">{{item.name}}</view>



    </view>
  </view>
</view>
<view v-if="goodsList">
  <view class="cu-bar bg-white">
    <view class="action"><text class="cuIcon-hot text-orange"></text>全网热榜</view>
  </view>
  <view class="cu-list menu card-menu sm-border margin-top-sm">
    <view class="cu-item" v-for="(item,index) in (goodsList)" :key="index">
      


<navigator hover-class="none" :url="'/pages/goods/goods-detail/index?id='+(item.id)" class="content overflow-1" :data-name="item.name">
        <text class="margin-right-sm text-bold text-orange">{{index+1}}</text>{{item.name}}
      </navigator>



    </view>
  </view>
</view>
</block>
</template>

<script>
/**
 * Copyright (C) 2018-2019
 * All rights reserved, Designed By www.joolun.com
 * 注意：
 * 本软件为www.joolun.com开发研制，项目使用请保留此说明
 */
const app = getApp();
export default {data() {
            return {
  searchHistory: [],
  goodsList: []
};
        },onShow() {
  this.setData({
    searchHistory: uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : []
  });
}, 
onLoad(options) {
  app.globalData.initPage().then(res => {
    this.goodsPage();
  });
}, 
methods: {
    searchHandle(e) {
      let value;

      if (e.detail.value) {
        value = e.detail.value;
      } else {
        if (e.currentTarget.dataset.name) {
          value = e.currentTarget.dataset.name;
        }
      }

      let searchHistory = this.searchHistory;
      searchHistory.forEach(function (item, index) {
        let i = 9; //最多缓存10条

        if (item.name == value) {
          searchHistory.splice(index, 1);
          i++;
        }

        if (index >= i) {
          searchHistory.splice(index, 1);
        }
      });
      searchHistory.unshift({
        name: value
      });
      uni.setStorageSync('searchHistory', searchHistory);
      uni.navigateTo({
        url: '/pages/goods/goods-list/index?name=' + value
      });
    },

    clearSearchHistory() {
      let that = this;
      uni.showModal({
        content: '确认删除全部历史记录？',
        cancelText: '我再想想',
        confirmColor: '#ff0000',

        success(res) {
          if (res.confirm) {
            that.setData({
              searchHistory: []
            });
            uni.setStorageSync('searchHistory', []);
          }
        }

      });
    },

    goodsPage() {
      app.globalData.api.goodsPage({
        searchCount: false,
        current: 1,
        size: 10,
        ascs: '',
        //升序字段
        descs: 'sale_num'
      }).then(res => {
        let goodsList = res.data.records;
        this.setData({
          goodsList: goodsList
        });
      });
    }
}};
</script>
<style >

</style>